<template>
  <div class="ritual-arrangement">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/salvation">超度与救赎</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <router-link to="/salvation/transcendence-application">超度申请管理</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>仪式安排</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="page-title">仪式安排</div>
        <div class="page-subtitle">安排和管理超度仪式的时间、地点和主持人</div>
      </div>
      <div class="header-actions">
        <a-button type="primary" @click="handleCreateArrangement">
          <CalendarOutlined />
          新建安排
        </a-button>
      </div>
    </div>

    <!-- 仪式统计 -->
    <div class="ritual-stats">
      <a-row :gutter="[20, 20]">
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <CalendarOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ ritualStats.todayRituals }}</div>
              <div class="stat-label">今日仪式</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <ClockCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ ritualStats.scheduledRituals }}</div>
              <div class="stat-label">已安排</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <UserOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ ritualStats.activeOfficers }}</div>
              <div class="stat-label">执事人员</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="12" :sm="6" :lg="6">
          <div class="stat-card">
            <div class="stat-icon">
              <EnvironmentOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ ritualStats.availableVenues }}</div>
              <div class="stat-label">可用场地</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 仪式日历 -->
    <div class="ritual-calendar">
      <h3>仪式日历</h3>
      <a-calendar :fullscreen="false" @panelChange="onPanelChange" :headerRender="headerRender">
        <template #dateCellRender="{ current }">
          <div class="ritual-date">
            <div v-for="ritual in getRitualsForDate(current)" :key="ritual.id" class="ritual-item" :class="ritual.type">
              <div class="ritual-time">{{ ritual.time }}</div>
              <div class="ritual-name">{{ ritual.name }}</div>
            </div>
          </div>
        </template>
      </a-calendar>
    </div>

    <!-- 仪式安排列表 -->
    <div class="ritual-list">
      <div class="list-header">
        <h3>仪式安排管理</h3>
        <div class="header-actions">
          <a-input-search placeholder="搜索仪式名称或主持人" style="width: 300px" @search="handleSearch" />
          <a-select v-model:value="statusFilter" placeholder="状态筛选" style="width: 120px; margin-left: 12px" @change="handleFilterChange">
            <a-select-option value="">全部状态</a-select-option>
            <a-select-option value="已安排">已安排</a-select-option>
            <a-select-option value="进行中">进行中</a-select-option>
            <a-select-option value="已完成">已完成</a-select-option>
            <a-select-option value="已取消">已取消</a-select-option>
          </a-select>
        </div>
      </div>

      <a-table :columns="columns" :data-source="filteredRituals" :pagination="pagination" row-key="id">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">
              {{ record.status }}
            </a-tag>
          </template>
          <template v-if="column.key === 'type'">
            <a-tag :color="getTypeColor(record.type)">
              {{ record.type }}
            </a-tag>
          </template>
          <template v-if="column.key === 'participants'">
            <a-avatar-group size="small" :max-count="3">
              <a-avatar v-for="participant in record.participants" :key="participant.id" :style="{ backgroundColor: getAvatarColor(participant.id) }">
                {{ participant.name.charAt(0) }}
              </a-avatar>
            </a-avatar-group>
          </template>
          <template v-if="column.key === 'actions'">
            <a-space>
              <a-button type="link" size="small" @click="viewDetail(record)"> 查看详情 </a-button>
              <a-button type="link" size="small" @click="editRitual(record)"> 编辑安排 </a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </div>

    <!-- 新建/编辑安排模态框 -->
    <a-modal v-model:open="showArrangementModal" :title="isEdit ? '编辑仪式安排' : '新建仪式安排'" width="900px" @ok="submitArrangement" :confirmLoading="saving">
      <a-form :model="arrangementForm" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="仪式名称" required>
              <a-input v-model:value="arrangementForm.name" placeholder="请输入仪式名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="仪式类型" required>
              <a-select v-model:value="arrangementForm.type" placeholder="请选择仪式类型">
                <a-select-option value="普通超度">普通超度</a-select-option>
                <a-select-option value="紧急超度">紧急超度</a-select-option>
                <a-select-option value="特殊超度">特殊超度</a-select-option>
                <a-select-option value="集体超度">集体超度</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="仪式日期" required>
              <a-date-picker v-model:value="arrangementForm.date" style="width: 100%" placeholder="选择仪式日期" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="仪式时间" required>
              <a-time-range-picker v-model:value="arrangementForm.timeRange" style="width: 100%" placeholder="选择开始和结束时间" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="仪式场地" required>
              <a-select v-model:value="arrangementForm.venue" placeholder="请选择仪式场地">
                <a-select-option value="功德堂一号厅">功德堂一号厅</a-select-option>
                <a-select-option value="功德堂二号厅">功德堂二号厅</a-select-option>
                <a-select-option value="功德堂三号厅">功德堂三号厅</a-select-option>
                <a-select-option value="静心院">静心院</a-select-option>
                <a-select-option value="慈悲殿">慈悲殿</a-select-option>
                <a-select-option value="观音阁">观音阁</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="主持法师" required>
              <a-select v-model:value="arrangementForm.officer" placeholder="请选择主持法师">
                <a-select-option value="观音使者">观音使者</a-select-option>
                <a-select-option value="地藏使者">地藏使者</a-select-option>
                <a-select-option value="文殊使者">文殊使者</a-select-option>
                <a-select-option value="普贤使者">普贤使者</a-select-option>
                <a-select-option value="弥勒使者">弥勒使者</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="参与人员" required>
          <a-select v-model:value="arrangementForm.participantIds" mode="multiple" placeholder="选择参与人员" :options="participantOptions" />
        </a-form-item>

        <a-form-item label="仪式用品">
          <a-checkbox-group v-model:value="arrangementForm.ritualItems">
            <a-checkbox value="香烛">香烛</a-checkbox>
            <a-checkbox value="供果">供果</a-checkbox>
            <a-checkbox value="经书">经书</a-checkbox>
            <a-checkbox value="法器">法器</a-checkbox>
            <a-checkbox value="花朵">花朵</a-checkbox>
            <a-checkbox value="纸钱">纸钱</a-checkbox>
          </a-checkbox-group>
        </a-form-item>

        <a-form-item label="特殊要求">
          <a-textarea v-model:value="arrangementForm.specialRequirements" :rows="3" placeholder="请输入特殊要求或注意事项" />
        </a-form-item>

        <a-form-item label="备注说明">
          <a-textarea v-model:value="arrangementForm.notes" :rows="2" placeholder="其他备注信息" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 查看详情模态框 -->
    <a-modal v-model:open="showDetailModal" title="仪式安排详情" width="1000px" :footer="null">
      <div class="arrangement-detail" v-if="selectedArrangement">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-card class="detail-card">
              <h4>基本信息</h4>
              <a-descriptions :column="1" size="small">
                <a-descriptions-item label="仪式编号">{{ selectedArrangement.id }}</a-descriptions-item>
                <a-descriptions-item label="仪式名称">{{ selectedArrangement.name }}</a-descriptions-item>
                <a-descriptions-item label="仪式类型">
                  <a-tag :color="getTypeColor(selectedArrangement.type)">
                    {{ selectedArrangement.type }}
                  </a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="当前状态">
                  <a-tag :color="getStatusColor(selectedArrangement.status)">
                    {{ selectedArrangement.status }}
                  </a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="仪式日期">{{ selectedArrangement.date }}</a-descriptions-item>
                <a-descriptions-item label="仪式时间">{{ selectedArrangement.time }}</a-descriptions-item>
                <a-descriptions-item label="仪式场地">{{ selectedArrangement.venue }}</a-descriptions-item>
                <a-descriptions-item label="主持法师">{{ selectedArrangement.officer }}</a-descriptions-item>
              </a-descriptions>
            </a-card>
          </a-col>

          <a-col :span="16">
            <a-card class="detail-card">
              <h4>参与人员</h4>
              <div class="participants-grid">
                <div v-for="participant in selectedArrangement.participants" :key="participant.id" class="participant-card">
                  <a-avatar :style="{ backgroundColor: getAvatarColor(participant.id) }" size="large">
                    {{ participant.name.charAt(0) }}
                  </a-avatar>
                  <div class="participant-info">
                    <div class="participant-name">{{ participant.name }}</div>
                    <div class="participant-role">{{ participant.role || '参与人' }}</div>
                    <div class="participant-phone">{{ participant.phone || '-' }}</div>
                  </div>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>

        <a-card class="detail-card" style="margin-top: 16px">
          <h4>仪式详情</h4>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-descriptions :column="1" size="small">
                <a-descriptions-item label="预计时长">{{ selectedArrangement.duration || '90分钟' }}</a-descriptions-item>
                <a-descriptions-item label="参与人数">{{ selectedArrangement.participants.length }}人</a-descriptions-item>
                <a-descriptions-item label="创建时间">{{ selectedArrangement.createdTime }}</a-descriptions-item>
                <a-descriptions-item label="创建人">{{ selectedArrangement.creator || '当前用户' }}</a-descriptions-item>
              </a-descriptions>
            </a-col>
            <a-col :span="12">
              <div class="ritual-items">
                <h5>仪式用品</h5>
                <a-tag v-for="item in selectedArrangement.ritualItems" :key="item" style="margin: 2px">
                  {{ item }}
                </a-tag>
              </div>
            </a-col>
          </a-row>
        </a-card>

        <a-card class="detail-card" style="margin-top: 16px" v-if="selectedArrangement.specialRequirements || selectedArrangement.notes">
          <h4>特殊说明</h4>
          <a-descriptions :column="1" size="small">
            <a-descriptions-item label="特殊要求" v-if="selectedArrangement.specialRequirements">
              {{ selectedArrangement.specialRequirements }}
            </a-descriptions-item>
            <a-descriptions-item label="备注信息" v-if="selectedArrangement.notes">
              {{ selectedArrangement.notes }}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>

        <a-card class="detail-card" style="margin-top: 16px" v-if="selectedArrangement.statusHistory">
          <h4>状态历史</h4>
          <a-timeline>
            <a-timeline-item v-for="item in selectedArrangement.statusHistory" :key="item.id" :color="getTimelineColor(item.type)">
              <template #dot>
                <component :is="getTimelineIcon(item.type)" />
              </template>
              <div class="timeline-content">
                <div class="timeline-title">{{ item.title }}</div>
                <div class="timeline-description">{{ item.description }}</div>
                <div class="timeline-time">{{ item.time }} - {{ item.operator }}</div>
              </div>
            </a-timeline-item>
          </a-timeline>
        </a-card>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, h } from 'vue'
import { useSalvationStore } from '@/stores/salvation'
import dayjs from 'dayjs'
import { CalendarOutlined, ClockCircleOutlined, UserOutlined, EnvironmentOutlined, CheckCircleOutlined, SettingOutlined, FormOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

const salvationStore = useSalvationStore()

// 模态框状态
const showArrangementModal = ref(false)
const showDetailModal = ref(false)
const saving = ref(false)
const isEdit = ref(false)
const selectedArrangement = ref(null)

// 表单数据
const arrangementForm = ref({
  name: '',
  type: '',
  date: null,
  timeRange: [],
  venue: '',
  officer: '',
  participantIds: [],
  ritualItems: ['香烛', '经书'],
  specialRequirements: '',
  notes: ''
})

// 参与人员选项
const participantOptions = ref([
  { label: '王小明', value: 1 },
  { label: '王小红', value: 2 },
  { label: '李华', value: 3 },
  { label: '李梅', value: 4 },
  { label: '李强', value: 5 },
  { label: '张小红', value: 6 },
  { label: '陈小军', value: 7 },
  { label: '刘大明', value: 8 }
])

// 仪式统计数据
const ritualStats = ref({
  todayRituals: 8,
  scheduledRituals: 24,
  activeOfficers: 15,
  availableVenues: 6
})

// 筛选条件
const statusFilter = ref('')
const searchKeyword = ref('')

// 分页配置
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total, range) => `共 ${total} 条记录，第 ${range[0]}-${range[1]} 条`
})

// 模拟仪式数据
const ritualData = ref([
  {
    id: 'RA001',
    name: '王老太超度仪式',
    type: '普通超度',
    date: '2024-01-15',
    time: '09:00-10:30',
    venue: '功德堂一号厅',
    officer: '观音使者',
    participants: [
      { id: 1, name: '王小明', role: '主申请人', phone: '138****5678' },
      { id: 2, name: '王小红', role: '家属', phone: '139****1234' }
    ],
    status: '已安排',
    duration: '90分钟',
    ritualItems: ['香烛', '供果', '经书', '法器'],
    specialRequirements: '家属要求简化仪式流程',
    notes: '老人生前信佛，按传统仪式进行',
    createdTime: '2024-01-14 16:30:00',
    creator: '当前用户',
    statusHistory: [
      {
        id: 1,
        type: 'create',
        title: '创建安排',
        description: '仪式安排已创建，等待执行',
        time: '2024-01-14 16:30:00',
        operator: '当前用户'
      }
    ]
  },
  {
    id: 'RA002',
    name: '李大爷急速超度',
    type: '紧急超度',
    date: '2024-01-15',
    time: '14:00-15:30',
    venue: '功德堂二号厅',
    officer: '地藏使者',
    participants: [
      { id: 3, name: '李华', role: '主申请人', phone: '139****2345' },
      { id: 4, name: '李梅', role: '家属', phone: '136****6789' },
      { id: 5, name: '李强', role: '家属', phone: '135****9876' }
    ],
    status: '进行中',
    duration: '90分钟',
    ritualItems: ['香烛', '供果', '经书', '法器', '花朵'],
    specialRequirements: '需要加急处理，情况紧急',
    notes: '意外离世，家属情绪激动，需要安抚',
    createdTime: '2024-01-14 18:00:00',
    creator: '当前用户',
    statusHistory: [
      {
        id: 1,
        type: 'create',
        title: '创建安排',
        description: '紧急仪式安排已创建',
        time: '2024-01-14 18:00:00',
        operator: '当前用户'
      },
      {
        id: 2,
        type: 'start',
        title: '仪式开始',
        description: '仪式正在进行中',
        time: '2024-01-15 14:00:00',
        operator: '地藏使者'
      }
    ]
  },
  {
    id: 'RA003',
    name: '张奶奶佛教超度',
    type: '特殊超度',
    date: '2024-01-16',
    time: '10:00-12:00',
    venue: '慈悲殿',
    officer: '文殊使者',
    participants: [{ id: 6, name: '张小红', role: '主申请人', phone: '137****8901' }],
    status: '已安排',
    duration: '120分钟',
    ritualItems: ['香烛', '供果', '经书', '法器', '花朵', '纸钱'],
    specialRequirements: '需要按照佛教仪式进行，使用佛教经文',
    notes: '奶奶生前信佛，要求完整的佛教超度仪式',
    createdTime: '2024-01-13 20:15:00',
    creator: '当前用户',
    statusHistory: [
      {
        id: 1,
        type: 'create',
        title: '创建安排',
        description: '特殊仪式安排已创建',
        time: '2024-01-13 20:15:00',
        operator: '当前用户'
      }
    ]
  },
  {
    id: 'RA004',
    name: '陈老师超度仪式',
    type: '普通超度',
    date: '2024-01-17',
    time: '15:00-16:30',
    venue: '功德堂三号厅',
    officer: '普贤使者',
    participants: [{ id: 7, name: '陈小军', role: '主申请人', phone: '136****7890' }],
    status: '已完成',
    duration: '90分钟',
    ritualItems: ['香烛', '供果', '经书'],
    specialRequirements: '',
    notes: '退休教师，简单庄重的仪式',
    createdTime: '2024-01-12 14:00:00',
    creator: '当前用户',
    statusHistory: [
      {
        id: 1,
        type: 'create',
        title: '创建安排',
        description: '仪式安排已创建',
        time: '2024-01-12 14:00:00',
        operator: '当前用户'
      },
      {
        id: 2,
        type: 'start',
        title: '仪式开始',
        description: '仪式正式开始执行',
        time: '2024-01-17 15:00:00',
        operator: '普贤使者'
      },
      {
        id: 3,
        type: 'complete',
        title: '仪式完成',
        description: '超度仪式已圆满完成',
        time: '2024-01-17 16:30:00',
        operator: '普贤使者'
      }
    ]
  }
])

// 表格列配置
const columns = [
  {
    title: '仪式编号',
    dataIndex: 'id',
    key: 'id',
    width: 100
  },
  {
    title: '仪式名称',
    dataIndex: 'name',
    key: 'name',
    width: 180
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    width: 100
  },
  {
    title: '日期时间',
    key: 'datetime',
    width: 160,
    customRender: ({ record }) => `${record.date} ${record.time}`
  },
  {
    title: '场地',
    dataIndex: 'venue',
    key: 'venue',
    width: 130
  },
  {
    title: '主持人',
    dataIndex: 'officer',
    key: 'officer',
    width: 100
  },
  {
    title: '参与者',
    dataIndex: 'participants',
    key: 'participants',
    width: 120
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100
  },
  {
    title: '操作',
    key: 'actions',
    width: 160
  }
]

// 过滤后的仪式列表
const filteredRituals = computed(() => {
  let result = ritualData.value

  // 状态筛选
  if (statusFilter.value) {
    result = result.filter((ritual) => ritual.status === statusFilter.value)
  }

  // 关键词搜索
  if (searchKeyword.value) {
    result = result.filter((ritual) => ritual.name.includes(searchKeyword.value) || ritual.officer.includes(searchKeyword.value))
  }

  pagination.value.total = result.length
  return result
})

// 获取指定日期的仪式
const getRitualsForDate = (date) => {
  const dateStr = date.format('YYYY-MM-DD')
  return ritualData.value.filter((ritual) => ritual.date === dateStr)
}

// 搜索处理
const handleSearch = (value) => {
  searchKeyword.value = value
}

// 筛选变更处理
const handleFilterChange = () => {
  pagination.value.current = 1
}

// 日历面板变更
const onPanelChange = (value, mode) => {
  console.log('日历面板变更:', value, mode)
}

// 自定义日历头部
const headerRender = ({ value, type, onChange, onTypeChange }) => {
  const month = value.month()
  const year = value.year()

  // 生成月份选项
  const monthOptions = []
  for (let i = 0; i < 12; i++) {
    monthOptions.push({
      label: `${i + 1}月`,
      value: i
    })
  }

  // 生成年份选项
  const yearOptions = []
  for (let i = 0; i < 10; i++) {
    const y = 2020 + i
    yearOptions.push({
      label: `${y}年`,
      value: y
    })
  }

  return h('div', { style: 'padding: 10px' }, [
    h('a-row', { gutter: 8 }, [
      h('a-col', [
        h('a-select', {
          size: 'small',
          value: year,
          options: yearOptions,
          onChange: (newYear) => {
            const now = value.clone().year(newYear)
            onChange(now)
          }
        })
      ]),
      h('a-col', [
        h('a-select', {
          size: 'small',
          value: month,
          options: monthOptions,
          onChange: (newMonth) => {
            const now = value.clone().month(newMonth)
            onChange(now)
          }
        })
      ])
    ])
  ])
}

// 重置表单
const resetArrangementForm = () => {
  arrangementForm.value = {
    name: '',
    type: '',
    date: null,
    timeRange: [],
    venue: '',
    officer: '',
    participantIds: [],
    ritualItems: ['香烛', '经书'],
    specialRequirements: '',
    notes: ''
  }
}

// 获取参与人员详细信息
const getParticipantDetails = (participantIds) => {
  return participantIds.map((id) => {
    const option = participantOptions.value.find((p) => p.value === id)
    return {
      id: id,
      name: option?.label || '未知',
      role: '参与人',
      phone: `13${id}****${String(id).padStart(4, '0')}`
    }
  })
}

// 新建安排
const handleCreateArrangement = () => {
  isEdit.value = false
  resetArrangementForm()
  showArrangementModal.value = true
}

// 查看详情
const viewDetail = (record) => {
  selectedArrangement.value = record
  showDetailModal.value = true
}

// 编辑仪式
const editRitual = (record) => {
  isEdit.value = true
  selectedArrangement.value = record

  // 填充表单数据
  arrangementForm.value = {
    name: record.name,
    type: record.type,
    date: dayjs(record.date),
    timeRange: record.time.split('-').map((t) => dayjs(`2024-01-01 ${t}`)),
    venue: record.venue,
    officer: record.officer,
    participantIds: record.participants.map((p) => p.id),
    ritualItems: record.ritualItems || ['香烛', '经书'],
    specialRequirements: record.specialRequirements || '',
    notes: record.notes || ''
  }

  showArrangementModal.value = true
}

// 提交安排
const submitArrangement = async () => {
  if (!arrangementForm.value.name || !arrangementForm.value.type || !arrangementForm.value.date || !arrangementForm.value.timeRange.length || !arrangementForm.value.venue || !arrangementForm.value.officer || !arrangementForm.value.participantIds.length) {
    message.error('请填写所有必填信息')
    return
  }

  saving.value = true
  try {
    await new Promise((resolve) => setTimeout(resolve, 1000))

    const timeStr = `${arrangementForm.value.timeRange[0].format('HH:mm')}-${arrangementForm.value.timeRange[1].format('HH:mm')}`
    const participants = getParticipantDetails(arrangementForm.value.participantIds)

    if (isEdit.value) {
      // 编辑现有安排
      const index = ritualData.value.findIndex((item) => item.id === selectedArrangement.value.id)
      if (index !== -1) {
        ritualData.value[index] = {
          ...ritualData.value[index],
          name: arrangementForm.value.name,
          type: arrangementForm.value.type,
          date: arrangementForm.value.date.format('YYYY-MM-DD'),
          time: timeStr,
          venue: arrangementForm.value.venue,
          officer: arrangementForm.value.officer,
          participants: participants,
          ritualItems: arrangementForm.value.ritualItems,
          specialRequirements: arrangementForm.value.specialRequirements,
          notes: arrangementForm.value.notes
        }

        // 添加编辑历史
        ritualData.value[index].statusHistory.push({
          id: ritualData.value[index].statusHistory.length + 1,
          type: 'edit',
          title: '安排修改',
          description: '仪式安排信息已更新',
          time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
          operator: '当前用户'
        })
      }
      message.success('仪式安排修改成功')
    } else {
      // 创建新安排
      const newArrangement = {
        id: `RA${String(ritualData.value.length + 1).padStart(3, '0')}`,
        name: arrangementForm.value.name,
        type: arrangementForm.value.type,
        date: arrangementForm.value.date.format('YYYY-MM-DD'),
        time: timeStr,
        venue: arrangementForm.value.venue,
        officer: arrangementForm.value.officer,
        participants: participants,
        status: '已安排',
        duration: '90分钟',
        ritualItems: arrangementForm.value.ritualItems,
        specialRequirements: arrangementForm.value.specialRequirements,
        notes: arrangementForm.value.notes,
        createdTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        creator: '当前用户',
        statusHistory: [
          {
            id: 1,
            type: 'create',
            title: '创建安排',
            description: '仪式安排已创建，等待执行',
            time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
            operator: '当前用户'
          }
        ]
      }

      ritualData.value.unshift(newArrangement)
      ritualStats.value.scheduledRituals += 1
      message.success('仪式安排创建成功')
    }

    showArrangementModal.value = false
    resetArrangementForm()
  } catch (error) {
    message.error('操作失败，请重试')
  } finally {
    saving.value = false
  }
}

// 获取状态颜色
const getStatusColor = (status) => {
  const colors = {
    已安排: 'blue',
    进行中: 'processing',
    已完成: 'success',
    已取消: 'error'
  }
  return colors[status] || 'default'
}

// 获取类型颜色
const getTypeColor = (type) => {
  const colors = {
    普通超度: 'blue',
    紧急超度: 'red',
    特殊超度: 'purple',
    集体超度: 'green'
  }
  return colors[type] || 'default'
}

// 获取头像颜色
const getAvatarColor = (id) => {
  const colors = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae', '#f56c6c']
  return colors[id % colors.length]
}

// 获取时间轴颜色
const getTimelineColor = (type) => {
  const colors = {
    create: 'blue',
    edit: 'orange',
    start: 'processing',
    complete: 'green',
    cancel: 'red'
  }
  return colors[type] || 'blue'
}

// 获取时间轴图标
const getTimelineIcon = (type) => {
  const icons = {
    create: FormOutlined,
    edit: SettingOutlined,
    start: ClockCircleOutlined,
    complete: CheckCircleOutlined,
    cancel: CloseCircleOutlined
  }
  return icons[type] || FormOutlined
}

onMounted(() => {
  console.log('仪式安排页面已加载')
})
</script>

<style lang="scss" scoped>
.ritual-arrangement {
  padding: 24px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
  color: #fff;

  // 面包屑导航
  .breadcrumb {
    margin-bottom: 24px;

    :deep(.ant-breadcrumb-link) {
      color: rgba(255, 255, 255, 0.8);

      &:hover {
        color: #ffd700;
      }
    }

    :deep(.ant-breadcrumb-separator) {
      color: rgba(255, 255, 255, 0.6);
    }
  }

  // 页面头部
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    .header-content {
      .page-title {
        font-size: 2rem;
        font-weight: bold;
        color: #fff;
        margin-bottom: 8px;
      }

      .page-subtitle {
        color: rgba(255, 255, 255, 0.8);
        font-size: 1rem;
      }
    }
  }

  // 仪式统计
  .ritual-stats {
    margin-bottom: 32px;

    .stat-card {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: all 0.3s ease;

      .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        background: rgba(255, 215, 0, 0.2);
        color: #ffd700;
      }

      .stat-content {
        .stat-value {
          font-size: 1.8rem;
          font-weight: bold;
          color: #fff;
          margin-bottom: 4px;
        }

        .stat-label {
          color: rgba(255, 255, 255, 0.8);
          font-size: 0.9rem;
        }
      }
    }
  }

  // 仪式日历
  .ritual-calendar {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;

    h3 {
      margin: 0 0 16px 0;
      color: #fff;
      font-size: 1.2rem;
    }

    :deep(.ant-picker-calendar) {
      background: transparent;
      color: #fff;

      .ant-picker-calendar-header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      .ant-picker-cell {
        border: 1px solid rgba(255, 255, 255, 0.1);

        &:hover {
          background: rgba(255, 255, 255, 0.05);
        }
      }

      .ant-picker-cell-inner {
        color: rgba(255, 255, 255, 0.8);
      }

      .ant-picker-calendar-date-today {
        border-color: #ffd700;
      }
    }

    .ritual-date {
      .ritual-item {
        font-size: 10px;
        padding: 1px 4px;
        margin: 1px 0;
        border-radius: 2px;
        color: #fff;

        &.普通超度 {
          background: rgba(24, 144, 255, 0.7);
        }

        &.紧急超度 {
          background: rgba(245, 34, 45, 0.7);
        }

        &.特殊超度 {
          background: rgba(114, 46, 209, 0.7);
        }

        .ritual-time {
          font-weight: bold;
        }

        .ritual-name {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  // 仪式安排列表
  .ritual-list {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;

    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      h3 {
        margin: 0;
        color: #fff;
        font-size: 1.2rem;
      }

      .header-actions {
        display: flex;
        align-items: center;
      }
    }

    :deep(.ant-table) {
      background: transparent;

      .ant-table-thead > tr > th {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.9);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }

      .ant-table-tbody > tr > td {
        background: transparent;
        color: rgba(255, 255, 255, 0.8);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      .ant-table-tbody > tr:hover > td {
        background: rgba(255, 255, 255, 0.05);
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .ritual-arrangement {
    padding: 16px;

    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;

      .header-content .page-title {
        font-size: 1.5rem;
      }
    }

    .stat-card {
      flex-direction: column;
      text-align: center;
      gap: 12px;

      .stat-content .stat-value {
        font-size: 1.5rem;
      }
    }

    .ritual-list .list-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }
  }

  // 模态框样式
  :deep(.ant-modal) {
    .ant-modal-content {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .ant-modal-header {
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .ant-modal-title {
        color: #1a1a2e;
        font-weight: 600;
        font-size: 18px;
      }
    }

    .ant-modal-body {
      background: transparent;
      color: #1a1a2e;
    }

    .ant-modal-footer {
      background: transparent;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
  }

  // 表单样式
  :deep(.ant-form) {
    .ant-form-item-label > label {
      color: #1a1a2e;
      font-weight: 500;
    }

    .ant-input,
    .ant-input-number,
    .ant-select-selector,
    .ant-picker,
    .ant-textarea {
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(255, 215, 0, 0.3);
      border-radius: 8px;
      color: #1a1a2e;

      &:hover {
        border-color: #ffd700;
      }

      &:focus,
      &.ant-input-focused,
      &.ant-picker-focused,
      &.ant-select-focused {
        border-color: #ffd700;
        box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
      }
    }

    .ant-select-arrow {
      color: #1a1a2e;
    }

    .ant-checkbox-wrapper {
      color: #1a1a2e;
    }
  }

  // 详情模态框样式
  .arrangement-detail {
    .detail-card {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 215, 0, 0.3);
      border-radius: 12px;
      margin-bottom: 16px;

      h4 {
        color: #1a1a2e;
        font-weight: 600;
        margin-bottom: 16px;
        font-size: 16px;
      }

      h5 {
        color: #1a1a2e;
        font-weight: 500;
        margin-bottom: 8px;
        font-size: 14px;
      }
    }

    .participants-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px;

      .participant-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border: 1px solid rgba(255, 215, 0, 0.2);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.05);

        .participant-info {
          .participant-name {
            font-weight: 600;
            color: #1a1a2e;
            margin-bottom: 2px;
          }

          .participant-role {
            font-size: 12px;
            color: #666;
            margin-bottom: 2px;
          }

          .participant-phone {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }

    .ritual-items {
      h5 {
        margin-bottom: 8px;
      }
    }

    .timeline-content {
      .timeline-title {
        font-weight: 600;
        color: #1a1a2e;
        margin-bottom: 4px;
      }

      .timeline-description {
        color: #666;
        margin-bottom: 4px;
        line-height: 1.5;
      }

      .timeline-time {
        color: #999;
        font-size: 12px;
      }
    }
  }

  // 描述列表样式
  :deep(.ant-descriptions) {
    .ant-descriptions-item-label {
      color: #1a1a2e;
      font-weight: 500;
    }

    .ant-descriptions-item-content {
      color: #1a1a2e;
    }
  }

  // 时间轴样式
  :deep(.ant-timeline) {
    .ant-timeline-item-content {
      color: #1a1a2e;
    }
  }

  // 按钮样式
  :deep(.ant-btn) {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;

    &.ant-btn-primary {
      background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
      border-color: #ffd700;
      color: #1a1a2e;

      &:hover {
        background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
        box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
      }
    }

    &.ant-btn-default {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.2);
      color: #1a1a2e;

      &:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: #ffd700;
        color: #1a1a2e;
      }
    }
  }

  // 标签样式
  :deep(.ant-tag) {
    border-radius: 6px;
    font-weight: 500;
    border: none;
    padding: 2px 8px;
  }

  // 分页样式
  :deep(.ant-pagination) {
    .ant-pagination-item {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);

      a {
        color: rgba(255, 255, 255, 0.85);
      }

      &.ant-pagination-item-active {
        background: #ffd700;
        border-color: #ffd700;

        a {
          color: #1a1a2e;
        }
      }
    }

    .ant-pagination-prev,
    .ant-pagination-next {
      .ant-pagination-item-link {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.85);
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .ritual-arrangement {
    padding: 16px;

    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;

      .header-content .page-title {
        font-size: 1.5rem;
      }
    }

    .stat-card {
      flex-direction: column;
      text-align: center;
      gap: 12px;

      .stat-content .stat-value {
        font-size: 1.5rem;
      }
    }

    .ritual-list .list-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }

    .arrangement-detail {
      .participants-grid {
        grid-template-columns: 1fr;
      }

      .ant-row {
        flex-direction: column;

        .ant-col {
          width: 100%;
          margin-bottom: 16px;
        }
      }
    }
  }
}
</style>
